<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>故障类型管理</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>

<body>
<div id="app">
    <div>
        <button @click="addType">添加故障类型</button>
        <br>
        查找：<input id="sel" placeholder="输入关键字" type="text">
        <button @click="selectType">查询</button>
        <button @click="resetType">重置</button>
    </div>
    <div v-if="showAdd">
        <table>
            <tr>
                <td>
                    故障分类名：<input type="text" ref="title" v-model.trim="addFaultType.title" placeholder="请输入15字以内中文">
                    <span>{{err.title}}</span>
                </td>
            </tr>
            <tr>
                <td>
                    排序：<input type="text" ref="sort" v-model.trim="addFaultType.sort" placeholder="请输入数字">
                    <span>{{err.sort}}</span>
                </td>
            </tr>
            <tr>
                <td>
                    <button @click="save">提交</button>
                    <button @click="backTab">返回</button>
                </td>
            </tr>
        </table>
    </div>
    <table border="1px" v-if="showTab">
        <tr>
            <td>标号</td>
            <td @click="sortTal">排序</td>
            <td>故障分类名</td>
            <td>操作</td>
        </tr>
        <tr v-for="fault,index in faultTypes">
            <td>{{index+1}}</td>
            <td>{{fault.sort}}</td>
            <td>{{fault.title}}</td>
            <td><input type="button" @click="updateType(index)" value="修改"><input type="button" @click="delType(index)" value="删除"></td>
        </tr>


    </table>
    <div> {{pageInfo.total}} 条
        <a v-for="i in pageInfo.pages" @click.prevent="initData(i)"
           :class="{'current':pageInfo.pageNum==i}"
        >{{i}}</a>
        {{pageInfo.pageNum}}/{{pageInfo.pages}} 页
    </div>
</div>
</body>
</html>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            faultTypes: [],//存放后端的数据
            pageInfo: {},//分页数据
            sortAsc: true,//排序顺序
            showTab: true,//显示所有数据表格
            showAdd: false,//显示添加的输入框
            addFaultType: {id:0},//存放新增加的数据
            err: {
                title: "",
                sort: ""
            },
            selectTitle: {
                title: "",
                id: 0,
            },
            oneType: {
                title:"",
            },
        },
        created: function () {
            this.initData(1);
        },
        methods: {
            //数据初始化
            initData: function (pageNum) {
                this.showTab = true;
                this.showAdd = false;
                axios.post("http://localhost:8080/manage/showFaultType?pageNum=" + pageNum, this.selectTitle)
                    .then(res => {
                        console.log(res.data.data);
                        this.faultTypes = res.data.data.list;
                        this.pageInfo = res.data.data;
                    });
            },
            //排序控制
            sortTal: function () {
                this.faultTypes.sort((a, b) => {
                    return this.sortAsc ? a.sort - b.sort : b.sort - a.sort;
                });
                this.sortAsc = !this.sortAsc;
            },
            //点击增加按键
            addType: function () {
                this.showAdd = true;
                this.showTab = false;
            },
            //返回表格
            backTab: function () {
                this.initData(this.pageInfo.pageNum);
                this.showAdd = false;
                this.showTab = true;
                this.addFaultType = {id:0};
            },
            //保存数据
            save: function () {
                console.log(this.addFaultType);
                console.log(this.faultTypes);
                var te = /^[\u4e00-\u9fa5_a-zA-Z0-9]{4,10}$/;
                var te1 = /^[0-9]{0,2}$/;
                var flag = false;
                if (this.addFaultType.title == undefined || this.addFaultType.title == "") {
                    this.err.title = "分类名不能为空";
                    this.$refs.title.focus();
                    return;
                } else if (!te.test(this.addFaultType.title)) {
                    this.err.title = "请输入4-10位汉字";
                    this.$refs.title.focus();
                    return;
                }
                else if (this.addFaultType.id!=0){
                    console.log("2222");
                }
                    else {
                    this.faultTypes.forEach(faultType => {
                        if (this.addFaultType.title == faultType.title) {
                            this.err.title = "不能添加重复的故障分类";
                            this.$refs.title.focus();
                            flag = true;
                        }
                    });
                    if (flag) return;
                    this.err.title = "";
                }

                if (this.addFaultType.sort == undefined || this.addFaultType.sort == "") {
                    this.err.sort = "排序数值不能为空";
                    this.$refs.sort.focus();
                    return;
                } else {
                    if (!te1.test(this.addFaultType.sort)) {
                        this.err.sort = "请输入数字";
                        this.$refs.sort.focus();
                        return;
                    }
                    this.err.sort = "";
                }
                if (this.oneType.id != 0) {
                    axios.post("http://localhost:8080/manage/updateFaultType", this.addFaultType).then(
                        res=>{
                           this.backTab();
                        }
                    );
                } else {
                    axios.put("http://localhost:8080/manage/addFaultType", this.addFaultType).then(
                        res => {
                            console.log(res.data);
                            this.backTab();
                        });
                }

            },
            selectType: function () {
                console.log(document.getElementById("sel").value);

                this.selectTitle.title = document.getElementById("sel").value;
                this.initData(1);
            },
            resetType: function () {
                this.selectTitle.id = 0;
                this.selectTitle.title = "";
                this.initData(1)
            },
            delType: function (index) {
                axios.delete("http://localhost:8080/manage/deleteFaultType" + this.faultTypes[index].id)
                    .then(res => {
                        this.faultTypes.splice(index, 1);
                        this.initData(this.pageInfo.pageNum)
                    });

            },
            updateType: function (index) {
                this.showAdd = true;
                this.showTab = false;
                this.addFaultType = this.faultTypes[index];
            }
        }
    });

</script>
